import React from 'react'

import './style.scss'

class Item extends React.Component{
    constructor(props, context){
        super(props, context)
        this.state ={
            commentState: 2
        }
    }
    render() {
        const data = this.props.data
        return (
            <div>
                <div className="item-box clearfix">
                    <img className='fl' src={data.img} style={{width: '150px'}}/>
                    <div className="fl right">
                        <p>商户: {data.title}</p>
                        <p>数量: {data.count}</p>
                        <p>价格: ￥{data.price}</p>
                        {
                            this.state.commentState ===0
                            ? <button className="btn" onClick={this.showComent.bind(this)}>评价</button>
                            : this.state.commentState ===1
                            ? ''
                            : <button className="btn groy">已评价</button>
                        }
                    </div>
                </div>
                {
                        this.state.commentState === 1
                        ? <div className='comment-boxs'>
                            <textarea ref="commentText"></textarea>
                            <button onClick={this.comment.bind(this)}>提交</button>
                            <button className='cancel' onClick={this.cancel.bind(this)}>取消</button>
                        </div>
                        : ''
                    }
                </div>
        )
    }
    componentDidMount() {
        this.setState({
            commentState: this.props.data.commentState
        })
    }
    showComent() {
         this.setState({
            commentState: 1
        })
    }
    comment() {
        const id = this.props.data.id
        const commentText = this.refs.commentText
        const value = commentText.value.trim()
        const submitComent = this.props.submitComent
        if(!value) {
            return
        }
        submitComent(id, value, this.commentOk.bind(this))
    }
    commentOk() {
        this.setState({
            commentState: 2
        })
    }
    cancel() {
        this.setState({
            commentState: 0
        })
    }
}

export default Item